<template>
    <div class="header">
        <div class="headerTop">
            <div class="fl header_left">
                <img src="../../../static/images/header_logo.png" />
                <p>
                    欢迎您： <span class="companyName">{{ companyName }}</span
                    >&nbsp;&nbsp;&nbsp;
                    <span class="comAccount">{{ comAccount }}</span>
                </p>
            </div>

            <div class="fr header_right">
                <!-- <a class="stepABtn" @click="stepShow"><img src="../../../static/images/step_icon.png">操作流程</a> -->
                <!-- <router-link to='index'
                            class="indexBtn"></router-link> -->
                <div class="userBox">
                    <div class="user">
                        <img :src="imgUrL" />
                        <span>企业管理员</span>
                    </div>
                    <ul class="user_list">
                        <li>
                            <router-link to="personset">
                                <i class="el-icon-user"></i>
                                个人设置</router-link
                            >
                        </li>
                        <li>
                            <router-link to="changepsd">
                                <i class="el-icon-unlock"></i>
                                修改密码</router-link
                            >
                        </li>
                        <li>
                            <a @click="exitFlag = true">
                                <i class="el-icon-switch-button"></i>
                                安全退出</a
                            >
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="nav">
            <ul class="clearfix">
                <li
                    v-for="(item, index) in menus"
                    :key="index"
                    :class="
                        $route.query.navIndex == index ||
                        (!$route.query.navIndex && index === 0 && !redirect) ||
                        redirect === item.menuUrl
                            ? 'active'
                            : ''
                    "
                >
                    <div>
                        <!-- <span v-if="item.children">{{
                            item.menuName.split("(")[0]
                        }}</span> -->
                        <router-link
                            v-if="item.children"
                            :to="{
                                path: item.children[0].menuUrl,
                                query: {
                                    navIndex: index,
                                    navChildren: JSON.stringify(item.children)
                                }
                            }"
                            >{{ item.menuName.split("(")[0] }}</router-link
                        >
                        <router-link
                            :to="{
                                path: item.menuUrl,
                                query: {
                                    navIndex: index,
                                    pid: $monitorQuery.pid,
                                    comid: $monitorQuery.comid
                                }
                            }"
                            v-else-if="
                                item.menuUrl == 'monitor' && $monitorQuery.pid
                            "
                            >{{ item.menuName.split("(")[0] }}</router-link
                        >
                      <router-link
                        to="#"
                        @click.native="geto"
                        v-else-if="
                                item.menuUrl == 'education'
                            "
                      >{{ item.menuName.split("(")[0] }}</router-link
                      >
                        <router-link
                            :to="{
                                path: item.menuUrl,
                                query: {
                                    navIndex: index
                                }
                            }"
                            v-else
                            >{{ item.menuName.split("(")[0] }}</router-link
                        >
                    </div>
                    <!-- <dl v-if="item.children">
                        <dt v-for="(itemChild, i) in item.children" :key="i">
                            <router-link
                                :to="{
                                    path: itemChild.menuUrl,
                                    query: {
                                        navIndex: index
                                    }
                                }"
                                >{{
                                    itemChild.menuName.split("(")[0]
                                }}</router-link
                            >
                        </dt>
                    </dl> -->
                </li>
                <!-- <li :class="$route.query.navIndex == 7?'active' : '' ">
                    <div>
                        <router-link :to="{
                           path:'/monitor',
                           query:{
                               navIndex:7
                           }
                        }">应急预案检测</router-link>
                    </div>
                </li> -->
            </ul>
        </div>
        <el-dialog
            title="系统提示"
            :visible.sync="exitFlag"
            width="30%"
            :append-to-body="true"
        >
            <span class="exitTcNote"
                ><img
                    src="../../../static/images/warn_icon.png"
                />确认要退出吗？</span
            >
            <span slot="footer" class="dialog-footer">
                <input
                    @click="exit"
                    type="button"
                    value="确 认"
                    class="tcSubmit"
                />
                <input
                    @click="exitFlag = false"
                    type="button"
                    value="取 消"
                    class="tcCancel"
                />
            </span>
        </el-dialog>
        <!-- <el-dialog
				   title="操作流程"
				   :visible.sync="$store.state.showflag1"
           :append-to-body="true"
				   width="600px" class="stepDialog"
				  >
	    <div class="step">
            <div class="stepImg">
              <img src="../../../static/images/step.png">
            </div>
			<div class="stepBottom">
              <img src="../../../static/images/stepNote_icon.png">
              首次登录操作需按以上流程操作！
              <a class="noteBtn" @click="notShow">不再提示</a>
            </div>
		</div>
    </el-dialog> -->
    </div>
</template>

<script>
  var userName=null;
  var userAccount=null;
import config from "../../config.js";
import { mapState } from 'vuex'
export default {
    name: '',
    data () {
        return {
            exitFlag: false,
            companyName: '',
            comAccount: '',
            menus: [],
            showflag1: false,
            active: 0
        }
    },
    mounted () {
        if (localStorage.userid) {
            this.getInfo()
            if (JSON.parse(localStorage.user).userType == 2) {
                this.$router.push('waitAssess')
            }
        } else {
            this.$message.warning('请登录后查看')
            this.$router.push('login')
        }
    },
    props: {
        redirect: {
            default: ''
        }
    },
    computed: {
        ...mapState([
            'imgUrL'
        ])
    },
    created () {
        this.getMenu();

    },
    methods: {
      geto(){
        this.$axios.post(config.baseUrl + 'emergency/v1.0/user/center/authentication', {
          userAccount: JSON.parse(localStorage.getItem("user")).mobileNo,
        }).then((res) => {
          if (res.data.meta.success) {
            this.$axios.get(config.baseUrl +'/emergency/v1.0/update/train/1').then(res => {
            })
            window.location.href = 'http://tp-pre.1safety.cc/sso/partner2?ticket='+res.data.data.ticket+'&companyId=1ppvgy0if8jm&departmentId=048whr1h8ayq'
          } else {
            this.$message.warning(res.data.meta.message)
          }

        }).catch((response) => {
        })

      },
        cutTabClick (index) {
            // console.log(index);
            this.active = index
        },
        stepShow () {
            this.$store.state.showflag1 = true
        },
        getMenu () {
            this.$axios.post(config.baseUrl + 'emergency/v1.0/menu/list', {
                companyId: JSON.parse(localStorage.user).companyId,
                menuType: '1'
            }).then((res) => {
                // console.log(res)
                if (res.data.meta.success) {
                    this.menus = res.data.data
                } else {

                }

            }).catch((response) => {
            })
        },
        getInfo () {
            this.$axios.post(config.baseUrl + 'emergency/v1.0/personal/info', { userId: localStorage.userid })
                .then((res) => {
                    // console.log(res)
                    if (res.data.meta.success) {
                        this.companyName = res.data.data.companyName;
                        this.$store.state.loginstates = res.data.data.userType;
                        this.comAccount = res.data.data.userAccount;
                        userName=res.data.data.companyName;
                        userAccount=res.data.data.userAccount;
                       this.notic()
                    } else {
                        if (res.data.meta.message == 'repeat login') {
                            this.$message.warning('检测到账号重复登录，如非本人操作，为了账号安全，请您尽快修改密码！')
                            this.$router.push('login')
                        } else if (res.data.meta.message == '服务异常，未获取到token的值') {
                            this.$message.warning('服务异常，请重新登录！')
                            this.$router.push('login')
                        }
                    }

                }).catch((response) => {
                })
        },
        exit () {
            this.$axios.post(config.baseUrl + "emergency/v1.0/user/logout", { userId: localStorage.userid })
                .then(res => {
                    if (res.data.meta.success) {
                        this.exitFlag = false
                        for (var i in localStorage) {
                            console.log(localStorage[i])
                            if (i != 'psdFlag' || i != 'showFlag') {
                                localStorage.removeItem(i)
                                /* localStorage.removeItem(localStorage[i])*/
                            }
                        }
                      userName=null;
                      userAccount=null;
                      this.notic()
                        this.$router.push("login")

                    } else {
                        this.$message.warning(res.data.meta.message)
                    }
                })
                .catch(response => {
                    console.log(response);
                });
        },
      headermouse(){
        document.getElementById("dropdownload").click();
        document.getElementById("dropdownload").onclick();
        // this.$refs.downmenu.$el.click();
      },

      notic(){
        function encodeUTF8(s) {
          var i, r = [], c, x;
          for (i = 0; i < s.length; i++)
            if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
            else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F));
            else {
              if ((x = c ^ 0xD800) >> 10 == 0) //对四字节UTF-16转换为Unicode
                c = (x << 10) + (s.charCodeAt(++i) ^ 0xDC00) + 0x10000,
                  r.push(0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F));
              else r.push(0xE0 + (c >> 12 & 0xF));
              r.push(0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F));
            };
          return r;
        }

// 字符串加密成 hex 字符串
        function sha1(s) {
          var data = new Uint8Array(encodeUTF8(s))
          var i, j, t;
          var l = ((data.length + 8) >>> 6 << 4) + 16, s = new Uint8Array(l << 2);
          s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer);
          for (t = new DataView(s.buffer), i = 0; i < l; i++)s[i] = t.getUint32(i << 2);
          s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
          s[l - 1] = data.length << 3;
          var w = [], f = [
              function () { return m[1] & m[2] | ~m[1] & m[3]; },
              function () { return m[1] ^ m[2] ^ m[3]; },
              function () { return m[1] & m[2] | m[1] & m[3] | m[2] & m[3]; },
              function () { return m[1] ^ m[2] ^ m[3]; }
            ], rol = function (n, c) { return n << c | n >>> (32 - c); },
            k = [1518500249, 1859775393, -1894007588, -899497514],
            m = [1732584193, -271733879, null, null, -1009589776];
          m[2] = ~m[0], m[3] = ~m[1];
          for (i = 0; i < s.length; i += 16) {
            var o = m.slice(0);
            for (j = 0; j < 80; j++)
              w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1),
                t = rol(m[0], 5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0,
                m[1] = rol(m[1], 30), m.pop(), m.unshift(t);
            for (j = 0; j < 5; j++)m[j] = m[j] + o[j] | 0;
          };
          t = new DataView(new Uint32Array(m).buffer);
          for (var i = 0; i < 5; i++)m[i] = t.getUint32(i << 2);

          var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function (e) {
            return (e < 16 ? "0" : "") + e.toString(16);
          }).join("");
          return hex;
        }

        var nonce = Math.ceil(Math.random()*10);
        var timestamp = new Date().getTime();
        var web_token = userAccount
        var key = "4cb8b460b42b24f2519e8c25e9e87b82";
        var sign_str = "nonce="+nonce+"&timestamp="+timestamp+"&web_token="+web_token+"&"+key;
        var sign = sha1(sign_str);
        sign = sign.toUpperCase();
        (function(a,h,c,b,f,g){a["UdeskApiObject"]=f;a[f]=a[f]||function(){(a[f].d=a[f].d||[]).push(arguments)};g=h.createElement(c);g.async=1;g.charset="utf-8";g.src=b;c=h.getElementsByTagName(c)[0];c.parentNode.insertBefore(g,c)})(window,document,"script","https://assets-cli.s4.udesk.cn/im_client/js/udeskApi.js","ud");
        ud({
          "code": "7jci8f9",
          "link": "https://bsh-safety.s4.udesk.cn/im_client/?web_plugin_id=8694",
          "customer": {
            "nonce":nonce,
            "timestamp":timestamp,
            "web_token":web_token,
            "signature":sign,

            "c_org": "应急预案智能管理公共服务平台",
            "c_name": userName,
            "c_cf_账号": userAccount,
            "robot_modelKey":"9"
          }
        });
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
.header {
    height: 100px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
    min-width: 1200px;
    .headerTop {
        height: 58px;
        padding: 0 30px;
        background: url("../../../static/images/header_bg.png") no-repeat center
            center;
      background-size: 100% 100%;
        .header_left {
            line-height: 58px;
            height: 58px;
            p {
                display: inline;
                color: #fff;
                margin-left: 25px;
                font-size: 12px;
            }
        }
        .header_right {
            .stepABtn {
                color: #fff;
                margin-right: 20px;
                float: left;
                line-height: 58px;
                cursor: pointer;
                img {
                    margin-right: 5px;
                    position: relative;
                    top: -1px;
                }
            }
            .stepABtn:hover {
                opacity: 0.8;
            }
            .indexBtn {
                background: url("../../../static/images/indexBtn.png") no-repeat;
                display: inline-block;
                height: 31px;
                width: 81px;
                border: 1px solid rgba(64, 128, 255, 0.6);
                border-radius: 8px;
                margin-top: 14px;
                margin-right: 20px;
            }
            .indexBtn:hover {
                border-color: #fff;
            }
            .userBox {
                float: right;
                position: relative;
                .user {
                    line-height: 58px;
                    padding: 0 15px;
                    cursor: pointer;
                    > img {
                        height: 35px;
                        width: 35px;
                        border-radius: 50%;
                        position: relative;
                        top: -1px;
                    }
                    > span {
                        color: #fff;
                        margin-left: 15px;
                        padding-right: 30px;
                        background: url("../../../static/images/user_down.png")
                            no-repeat right 10px center;
                        display: inline-block;
                        width: 120px;
                        text-align: center;
                    }
                }
                .user_list {
                    width: 100%;
                    border-radius: 0 0 8px 8px;
                    background: #fff;
                    display: none;
                    position: absolute;
                    z-index: 2;
                    box-shadow: 1px 1px 10px rgba(207, 219, 241, 1);
                    li {
                        cursor: pointer;
                        a {
                            display: block;
                            height: 48px;
                            line-height: 48px;
                            padding-left: 52px;
                            color: #4080ff;
                        }
                    }
                    li:last-child {
                        border-radius: 0 0 8px 8px;
                    }
                    li:hover {
                        background: #ecf2ff;
                    }
                }
            }
            .userBox:hover {
                .user_list {
                    display: block;
                }
            }
        }
    }
    .nav {
        height: 42px;
        background: #fff;
        padding: 0 30px;
        box-shadow: 1px 1px 10px #cfdbf1;
        ul {
            > li {
                float: left;
                margin: 0 20px;
                position: relative;
                a,
                span {
                    display: block;
                }
                > div {
                    line-height: 39px;
                    cursor: pointer;
                    border-bottom: 3px solid #fff;
                    > a,
                    > span {
                        padding: 0 10px;
                    }
                }
                &.active > div {
                    border-bottom-color: #2b84ff;
                    font-weight: bold;
                }
                &:hover > div {
                    font-weight: bold;
                }
                &:hover dl {
                    display: block;
                }
                dl {
                    display: none;
                    background: #fff;
                    margin: 0;
                    box-shadow: 1px 1px 10px #cfdbf1;
                    dt {
                        line-height: 32px;
                        text-align: center;
                    }
                    dt:hover {
                        background: #e8f0ff;
                        color: #4080ff;
                    }
                }
            }
        }
    }
}
</style>
<style lang='less' scoped>
.exitTcNote {
    font-weight: bold;
    text-align: center;
    padding: 30px 0 20px;
    display: block;
    img {
        margin-right: 15px;
    }
}
.tcSubmit {
    height: 36px;
    width: 85px;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: #4080ff;
    /*background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);*/
}
.tcCancel {
    height: 36px;
    width: 85px;
    border: 1px solid #5ea0ff;
    color: #4080ff;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    margin-left: 5px;
}
.tcSubmit:hover,
.tcCancel:hover {
    opacity: 0.8;
}
</style>
<style lang='less'>
.stepDialog {
    .el-dialog__body {
        padding: 0;
    }
    .step {
        .stepImg {
            text-align: center;
            padding: 35px 0 45px;
        }
        .stepBottom {
            background: #f9f9f9;
            height: 70px;
            border-radius: 0 0 8px 8px;
            line-height: 70px;
            text-align: center;
            img {
                margin-right: 5px;
                position: relative;
                top: -1px;
            }
            a.noteBtn {
                cursor: pointer;
                color: #7254e6;
                display: inline-block;
                height: 36px;
                line-height: 36px;
                width: 96px;
                text-align: center;
                border: 1px solid #3f80fe;
                border-radius: 8px;
                margin-left: 15px;
            }
            a.noteBtn:hover {
                opacity: 0.8;
            }
        }
    }
}
</style>

